{extend name="base" /}
{block name="body"} 
<div class="layui-card">
        <div class="layui-form toolbar">
            <div class="layui-form-item">
                <form action="{:request()->url()}" class="layui-form" method="get">
            
             <div style="display:inline;display:inline-block;">
                     <input type="text" id="subscribe" name="subscribe" placeholder="输入内容" autocomplete="off" class="layui-input">
                </div>
                
               <div style="display:inline;display:inline-block;">
                    <input type="text" name="create_time" class="layui-input" id="create_time" placeholder="{:__('Created on')}">
                </div>

             <div style="display:inline;display:inline-block;">
                    <button class="layui-btn layui-btn-normal"><i class="fa fa-search"></i> 搜索</button>
                </div>
                </form>
            </div>
        </div>
    
     <div class="layui-tab layui-tab-brief" lay-filter="tab-all">
        <ul class="layui-tab-title">
            <li data-status="" class="layui-this">全部评论</li>
            <li data-status="1">评论记录</li>
            <li data-status="2">聊天记录</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <table class="layui-hide" id="order_all"></table>
            </div>
            <div class="layui-tab-item">
                <table class="layui-hide" id="order_pay"></table>
            </div>
            <div class="layui-tab-item">
                <table class="layui-hide" id="order_receive"></table>
            </div>
        </div>
    </div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="delete">{:__('Multiple choice deletion')}</button>
        <button class="layui-btn layui-btn-sm" lay-event="refresh">{:__('Refresh')}</button>
    </div>
</script>

    <!-- 表格操作列 -->
    <script type="text/html" id="tableTBTrack">
        <a href="{:url('notice/edit')}?id={{d.id}}" class="layui-btn layui-btn-sm ajax-iframe" data-width="410px" data-height="310px"><i class="layui-icon layui-icon-edit"></i>{:__('modify')}</a>
        <a href="{:url('notice/del')}?id={{d.id}}" class="layui-btn layui-btn-danger layui-btn-sm ajax-delete" tiptext="确认删除ID{{d.id}}"><i class="layui-icon layui-icon-delete"></i>{:__('delete')}</a>
    </script>
    <!-- 权限列 -->
 <script type="text/html" id="switchTpl">
       
        <input type="checkbox" name="status" lay-skin="switch" lay-filter="*" lay-text="未读|已读" data-url="{:url('notice/edit')}?id={{d.id}}" {{d.status==1?'checked':''}}>
    </script>
</div>
{/block}

            
{block name="js"}
<script>
layui.use(['element', 'table', 'laydate'], function () {
            // Tab的切换功能，切换事件监听等，需要依赖element模块
            var $ = layui.jquery, table = layui.table, laydate = layui.laydate, element = layui.element;
             // 搜索 start 引入时间组件laydate---------------------
        // 时间
        laydate.render({
            elem: '#create_time',
            theme: 'molv',
            trigger:'click',
            range: true
        });
             // 初始化加载
            getList('#order_all', '')
            // 监听tab切换 操作：文档 - 内置模块 - 常用元素操作 element - 监听tab切换
            element.on('tab(tab-all)', function (data) {
                   layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
                       tips: 1
                   });
                // console.log(this);        // 当前Tab标题所在的原始DOM元素
                // console.log(data.index);  // 得到当前Tab的所在下标
                // console.log(data.elem);   // 得到当前的Tab大容器
                var status = $(this).attr('data-status')
                var position = '#order_all'
                switch (status) {
                    case '1': position = '#order_pay'; break;
                    case '2': position = '#order_receive'; break;
                    default: position = '#order_all';
                }
                getList(position, status)
            })
            // 公共方法
            function getList(position, status = '', locks = '') {
                table.render({
                    elem: position
                    , method: 'get'
                    , url: "{:url('notice/index_json',['subscribe'=>input('subscribe'), 'create_time'=>input('create_time')])}"
                    , where: {
                        status: status
                    }
                    , cellMinWidth: 100
                    , limit:'15'
                    , limits:['15','30','50','100','200','500']
                    ,  size:'lg'
                    , even:true
                    , request: {
                        pageName: 'page' //页码的参数名称，默认：page
                        , limitName: 'limit' //每页数据量的参数名，默认：limit
                    }
                    , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    , cols: [[
                      {
                        type: 'checkbox'
                    }, {
                        type:'numbers',
                        title:'#', 
                        width: 60
                    }, {
                        field: 'article_id', 
                        title: '文章ID', 
                        align: 'center', 
                        width: 100, 
                        templet: function(d){
                    
                         return d.article_id == 0 ? '无文章ID' : d.article_id;
                           }
                    }, {
                        field: 'article_id', 
                        align: 'left', 
                        sort: true, 
                        width: 90, 
                        title: '专区', 
                        templet: function(d){
                         return d.article_id == 0 ? '<span class="layui-btn layui-btn-primary layui-border-green layui-btn-xs">聊天区</span>' : '<span class="layui-btn layui-btn-primary layui-border-red layui-btn-xs">评论区</span>';
                         }
                    }, {
                        field: 'username', 
                        title: '会员', 
                        align: 'center', 
                        width: 100
                    }, {
                        field: 'ip', 
                        title: 'IP', 
                        align: 'center', 
                        width: 180
                    }, {
                        field: 'content', 
                        title: '评论', 
                        align: 'center', 
                        width: 300
                    }, {
                        field: 'create_time', 
                        title: '添加时间', 
                        align: 'center', 
                        width: 180
                    }, {
                        field: 'status', 
                        title: '状态', 
                        align: 'center', 
                        width: 120,
                        templet: '#switchTpl'
                    }, {
                        align: 'center', 
                        toolbar: '#tableTBTrack', 
                        title: '操作', 
                        minWidth: 200
                    }
                   ]]
                    , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                       layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] //自定义分页布局
                            //,curr: 5 //设定初始在第 5 页
                    , groups: 5 //只显示 1 个连续页码
                    , first: false //不显示首页
                    , last: false //不显示尾页
                    , prev: '<em>上一页</em>'
                    , next: '<em>下一页</em>'
                      }
                    , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.msg, //解析提示文本
                            "count": res.data.total, //解析数据长度
                            "data": res.data.data //解析数据列表
                        };
                    }
                });
            }
        })

</script>
{/block}